<template>
	<view class="priceArea">
		<view class="contentWrap" :class="[{ hasError }]">
			<view class="">
				价格
			</view>
			<uv-form-item prop="price" ref="itemInputPriceRef">
				<view class="inputWrap">
					￥
					<uv-input :value="modelValue" type="number" placeholder="0.00" border="none"
						placeholderClass="customInputPlaceholder" :maxlength="7" @change="change"></uv-input>
				</view>
			</uv-form-item>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		toRef,
		watch,
		inject,
		computed,
		nextTick,
	} from 'vue'

	const props = defineProps({
		modelValue: {
			type: String,
			default: '0'
		}
	})
	const modelValue = toRef(props, 'modelValue')
	const emit = defineEmits(['update:modelValue'])

	const change = (val) => {
		emit('update:modelValue', val)
		nextTick(() => {
			emit('update:modelValue', parseFloat(val))
		})
	}

	// 通过formItem内部的message来判断当前是不是存在error
	const itemInputPriceRef = ref(null)
	const hasError = computed(() => {
		return itemInputPriceRef?.value?.message
	})
</script>

<style lang="scss">
	.priceArea {
		padding: 0 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
		color: #666666;
		font-size: 28rpx;

		>view {
			padding: 20rpx;
			background: #fff;
			border: 1px solid #fff;
		}

		.hasError {
			border: 1px dashed #f56c6c;
		}
	}

	.contentWrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.inputWrap {
		width: 180rpx;
		display: flex;
		align-items: center;
	}
</style>